<template>
  <div class="pay_history">
    <van-nav-bar
      title="缴费记录"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        class="dynamic-list-style"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="(item, index) in recordList" :key="index">
          <div v-if="index != 0" class="devide_div"></div>
          <div class="lifepay_sub_title">
            {{ `${item.year}年${item.month}月` }}
          </div>
          <div class="lifepay_devide_info">
            <ul>
              <li v-for="o in item.contentList" :key="o.id" class="record_list">
                <span class="record_title">{{
                  `${o.categoryName}-${o.username}-${o.neighborhoodName}`
                }}</span>
                <span class="record_number">{{ o.amount }}元</span>
                <p class="record_type">缴费类型：{{ o.categoryName }}</p>
                <p class="record_time">{{ o.payDate }}</p>
              </li>
            </ul>
          </div>
        </div>
      </van-list></van-pull-refresh
    >
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>

<script>
import smartProperty from "@/controller/smartProperty.js";
import constant from "@/controller/constant.js";
export default {
  name: "payHistory",
  data() {
    return {
      loading: false,
      finished: false,
      isLoading: false,
      recordList: [],
      tmpList: [],
      curPage: 1,
      pageSize: 10,
      showLoading: true
    };
  },
  mounted() {},
  methods: {
    onRefresh() {
      this.tmpList = [];
      setTimeout(() => {
        this.curPage = 1;
        this.pageSize = 10;
        this.getRecordList();
        this.isLoading = false;
      }, 500);
    },
    onLoad() {
      this.getRecordList();
    },
    getRecordList() {
      this.showLoading = true;
      const data = {
        curPage: this.curPage,
        pageSize: this.pageSize
      };
      smartProperty
        .community_payment_record_page(data)
        .then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.$toast("暂无更多数据");
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            this.tmpList = [...this.tmpList, ...res.datas.records];
            this.recordList = this.sortArray(this.tmpList);
            this.curPage = this.curPage + 1;
            if (res.datas.records.length < this.pageSize) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    sortArray(arr) {
      let arr1 = [];
      arr.forEach(ele => {
        for (let i = 0; i < arr1.length; i++) {
          let e = arr1[i];
          if (e.year === ele.year && e.month === ele.month) {
            e.contentList.push(ele);
            return;
          }
        }
        arr1.push({
          month: ele.month,
          year: ele.year,
          contentList: [ele]
        });
      });
      return arr1;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/workstation.scss";

.pay_history {
  background: #ffffff;
  height: 100%;

  .record_list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 15px;
    border-bottom: 1px solid #edeff2;
  }
  // .record_list:last-child {
  //   border: none
  // }
  .record_title {
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    padding: 15px 0;
    width: 210px;
    float: left;
  }
  .record_number {
    font-size: 20px;
    color: #333333;
    line-height: 24px;
    float: right;
    padding: 14.25px 0 0 0;
    width: 135px;
    text-align: right;
  }
  .record_type {
    font-size: 12px;
    color: #333333;
    line-height: 16.5px;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  .record_time {
    font-size: 12px;
    color: #9b9b9b;
    line-height: 16.5px;
    margin: 0;
    width: 100%;
    padding: 4.5px 0 20px;
  }
}
</style>
